<template>
  <div class="container bg-white">
    <div class="app-info">
      <van-image
        :src="logo"
        fit="cover"
        width="80px"
        height="80px"
        radius="5px"
      />
      <h1>{{title}}</h1>
      <p>{{version}}</p>
    </div>
    <van-cell-group class="mv-15">
      <van-cell
        title="用户协议"
        is-link
        clickable
      />
      <van-cell
        title="隐私条款"
        is-link
        clickable
      />
      <van-cell
        title="版权信息"
        is-link
        clickable
      />
    </van-cell-group>
  </div>
</template>
<script>
import {
  Row,
  Col,
  Icon,
  Image,
  Loading,
  Swipe,
  SwipeItem,
  Cell,
  CellGroup,
  Grid,
  GridItem,
  Button
} from 'vant'

export default {
  components: {
    [Image.name]: Image,
    [Loading.name]: Loading,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  },
  data () {
    return {
      logo: '../../static/images/logo.png',
      title: '优越定制',
      version: '1.0.1'
    }
  }
}
</script>

<style lang="less" scoped>
.app-info {
  text-align: center;
  padding: 50px 0 20px;

  h1 {
    font-size: 16px;
    margin: 0;
    padding: 10px 0;
  }
  p {
    margin: 0;
  }
}
</style>
